<template>
    <page-container title="添加银行卡" :showBack="true">
        <template v-slot:nav-left>
            <view class="nav-left" @click="goBack">
                <uni-icons type="left" size="20" color="#d4af37"></uni-icons>
            </view>
        </template>
        <view class="add-card-container">
            <!-- 输入表单区域 -->
            <view class="form-section">
                <view class="form-item">
                    <text class="label">账户名</text>
                    <input class="input" placeholder="请输入账户名" v-model="formData.accountName"
                        placeholder-class="placeholder" />
                </view>

                <view class="form-item">
                    <text class="label">银行卡号</text>
                    <input class="input" placeholder="请输入银行卡号" v-model="formData.cardNumber" type="number"
                        maxlength="19" placeholder-class="placeholder" />
                </view>

                <view class="form-item">
                    <text class="label">银行名称</text>
                    <input class="input" placeholder="请输入银行名称" v-model="formData.bankName"
                        placeholder-class="placeholder" />
                </view>

                <view class="form-item">
                    <text class="label">开户支行</text>
                    <input class="input" placeholder="请输入开户支行" v-model="formData.branchName"
                        placeholder-class="placeholder" />
                </view>

                <!-- <view class="form-item">
                <text class="label">联系电话</text>
                <input class="input" placeholder="请输入您的手机号" v-model="formData.phoneNumber" type="number" maxlength="11"
                    placeholder-class="placeholder" />
            </view> -->
            </view>

            <!-- 保存按钮 -->
            <view class="save-button-container">
                <button class="save-button" :class="{ disabled: !canSave }" @click="handleSave">保存</button>
            </view>
        </view>
    </page-container>
</template>

<script>
export default {
    name: 'AddCard',
    data() {
        return {
            formData: {
                accountName: '',
                cardNumber: '',
                bankName: '',
                branchName: '',
                // phoneNumber: ''
            }
        }
    },
    computed: {
        canSave() {
            return this.formData.accountName && this.formData.cardNumber && (this.formData.cardNumber.length > 13 && this.formData.cardNumber.length < 20) && this.formData.bankName
        }
    },
    methods: {
        goBack() {
            setTimeout(() => {
                uni.navigateBack()
            }, 100)
        },
        handleSave() {
            if (!this.formData.accountName) {
                uni.showToast({
                    title: '请输入账户名',
                    icon: 'none'
                })
                return
            }

            if (!this.formData.cardNumber) {
                uni.showToast({
                    title: '请输入银行卡号',
                    icon: 'none'
                })
                return
            }

            if (!this.formData.bankName) {
                uni.showToast({
                    title: '请输入银行名称',
                    icon: 'none'
                })
                return
            }

            // if (!this.formData.branchName) {
            //     uni.showToast({
            //         title: '请输入开户支行',
            //         icon: 'none'
            //     })
            //     return
            // }

            // if (!this.formData.phoneNumber) {
            //     uni.showToast({
            //         title: '请输入联系电话',
            //         icon: 'none'
            //     })
            //     return
            // }

            // // 手机号格式验证
            // const phoneRegex = /^1[3-9]\d{9}$/
            // if (!phoneRegex.test(this.formData.phoneNumber)) {
            //     uni.showToast({
            //         title: '请输入正确的手机号',
            //         icon: 'none'
            //     })
            //     return
            // }

            // 银行卡号格式验证
            if (this.formData.cardNumber.length < 13 || this.formData.cardNumber.length > 20) {
                uni.showToast({
                    title: '请输入正确的银行卡号',
                    icon: 'none'
                })
                return
            }
            let params = {
                cusId: uni.getStorageSync('customerInfo').id,
                bankName: this.formData.bankName,
                bankCardNo: this.formData.cardNumber,
                bankBranchName: this.formData.branchName
            }
            this.$http.post('/applet/customer/addBankCard', params).then(res => {
                uni.showToast({
                    title: '添加银行卡成功',
                    icon: 'success'
                })
                uni.$emit('refreshBankCardList')
                // 返回上一页
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.add-card-container {
    min-height: 100vh;
    background-color: #F5F5F6;
    padding: 20rpx;
}

.form-section {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 40rpx;
}

.form-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
        border-bottom: none;
    }
}

.label {
    width: 160rpx;
    font-size: 32rpx;
    color: $uni-text-color-black;
    font-weight: 550;
}

.input {
    flex: 1;
    font-weight: 400;
    font-size: 28rpx;
    color: $uni-text-color-black;
    text-align: right;
}

.placeholder {
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
}

.save-button-container {
    padding: 0 30rpx;
}

.save-button {
    width: 100%;
    height: 88rpx;
    background-color: #393837;
    color: #ffffff;
    border-radius: 50rpx;
    font-size: 28rpx;
    font-weight: 500;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.disabled {
    background-color: #cccccc;
}
</style>
